<template>
  <div class="trend-chart">
    <svg class="chart-svg" viewBox="0 0 715 218" xmlns="http://www.w3.org/2000/svg">
      <!-- 背景网格 -->
      <defs>
        <pattern id="grid" width="50" height="25" patternUnits="userSpaceOnUse">
          <path d="M 50 0 L 0 0 0 25" fill="none" stroke="#f0f0f0" stroke-width="0.5"/>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid)" />
      
      <!-- Y轴刻度线和标签 -->
      <g class="y-axis">
        <line x1="50" y1="40" x2="50" y2="180" stroke="#e5e7eb" stroke-width="1"/>
        <text x="45" y="45" text-anchor="end" font-size="12" fill="#6b7280">8</text>
        <text x="45" y="70" text-anchor="end" font-size="12" fill="#6b7280">6</text>
        <text x="45" y="95" text-anchor="end" font-size="12" fill="#6b7280">4</text>
        <text x="45" y="120" text-anchor="end" font-size="12" fill="#6b7280">2</text>
        <text x="45" y="145" text-anchor="end" font-size="12" fill="#6b7280">0</text>
      </g>
      
      <!-- X轴刻度线和标签 -->
      <g class="x-axis">
        <line x1="50" y1="180" x2="665" y2="180" stroke="#e5e7eb" stroke-width="1"/>
        <text x="100" y="195" text-anchor="middle" font-size="12" fill="#6b7280">00:00</text>
        <text x="200" y="195" text-anchor="middle" font-size="12" fill="#6b7280">06:00</text>
        <text x="350" y="195" text-anchor="middle" font-size="12" fill="#6b7280">12:00</text>
        <text x="500" y="195" text-anchor="middle" font-size="12" fill="#6b7280">18:00</text>
        <text x="650" y="195" text-anchor="middle" font-size="12" fill="#6b7280">24:00</text>
      </g>
      
      <!-- 压力趋势线 -->
      <g class="trend-lines">
        <!-- 主趋势线 (蓝色) -->
        <path 
          :d="generatePath(pressureData)" 
          fill="none" 
          stroke="#1677FF" 
          stroke-width="3"
          stroke-linecap="round"
        />
        
        <!-- 异常趋势线 (红色) -->
        <path 
          :d="generatePath(alertData)" 
          fill="none" 
          stroke="#FF4D4F" 
          stroke-width="2"
          stroke-linecap="round"
        />
        
        <!-- 在线设备趋势线 (绿色) -->
        <path 
          :d="generatePath(onlineData)" 
          fill="none" 
          stroke="#52C41A" 
          stroke-width="2"
          stroke-linecap="round"
        />
      </g>
      
      <!-- 数据点 -->
      <g class="data-points">
        <circle 
          v-for="(point, index) in pressurePoints" 
          :key="`pressure-${index}`"
          :cx="point.x" 
          :cy="point.y" 
          r="4" 
          fill="#1677FF"
          @mouseover="showTooltip($event, point, 'pressure')"
          @mouseout="hideTooltip"
        />
        <circle 
          v-for="(point, index) in alertPoints" 
          :key="`alert-${index}`"
          :cx="point.x" 
          :cy="point.y" 
          r="3" 
          fill="#FF4D4F"
          @mouseover="showTooltip($event, point, 'alert')"
          @mouseout="hideTooltip"
        />
        <circle 
          v-for="(point, index) in onlinePoints" 
          :key="`online-${index}`"
          :cx="point.x" 
          :cy="point.y" 
          r="3" 
          fill="#52C41A"
          @mouseover="showTooltip($event, point, 'online')"
          @mouseout="hideTooltip"
        />
      </g>
    </svg>
    
    <!-- 图例 -->
    <div class="chart-legend">
      <div class="legend-item">
        <div class="legend-color pressure-color"></div>
        <span>平均压力</span>
      </div>
      <div class="legend-item">
        <div class="legend-color alert-color"></div>
        <span>异常数量</span>
      </div>
      <div class="legend-item">
        <div class="legend-color online-color"></div>
        <span>在线设备</span>
      </div>
    </div>
    
    <!-- 工具提示 -->
    <div 
      v-if="tooltip.visible" 
      class="tooltip"
      :style="{ left: tooltip.x + 'px', top: tooltip.y + 'px' }"
    >
      <div class="tooltip-content">
        <div class="tooltip-title">{{ tooltip.title }}</div>
        <div class="tooltip-value">{{ tooltip.value }}</div>
        <div class="tooltip-time">{{ tooltip.time }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TrendChart',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tooltip: {
        visible: false,
        x: 0,
        y: 0,
        title: '',
        value: '',
        time: ''
      }
    }
  },
  computed: {
    // 处理压力数据
    pressureData() {
      return this.data.map(item => ({
        time: item.time,
        value: item.pressure,
        normalized: this.normalizeValue(item.pressure, 0, 8)
      }))
    },
    
    // 处理异常数据
    alertData() {
      return this.data.map(item => ({
        time: item.time,
        value: item.alerts,
        normalized: this.normalizeValue(item.alerts, 0, 10)
      }))
    },
    
    // 处理在线设备数据
    onlineData() {
      return this.data.map(item => ({
        time: item.time,
        value: item.online,
        normalized: this.normalizeValue(item.online, 170, 192)
      }))
    },
    
    // 压力数据点坐标
    pressurePoints() {
      return this.pressureData.map((item, index) => ({
        x: 50 + (index / (this.pressureData.length - 1)) * 615,
        y: 180 - item.normalized * 140,
        value: item.value,
        time: item.time
      }))
    },
    
    // 异常数据点坐标
    alertPoints() {
      return this.alertData.map((item, index) => ({
        x: 50 + (index / (this.alertData.length - 1)) * 615,
        y: 180 - item.normalized * 140,
        value: item.value,
        time: item.time
      }))
    },
    
    // 在线设备数据点坐标
    onlinePoints() {
      return this.onlineData.map((item, index) => ({
        x: 50 + (index / (this.onlineData.length - 1)) * 615,
        y: 180 - item.normalized * 140,
        value: item.value,
        time: item.time
      }))
    }
  },
  methods: {
    // 标准化数值到0-1范围
    normalizeValue(value, min, max) {
      return Math.max(0, Math.min(1, (value - min) / (max - min)))
    },
    
    // 生成SVG路径
    generatePath(data) {
      if (!data || data.length === 0) return ''
      
      const points = data.map((item, index) => {
        const x = 50 + (index / (data.length - 1)) * 615
        const y = 180 - item.normalized * 140
        return `${x},${y}`
      })
      
      return `M ${points.join(' L ')}`
    },
    
    // 显示工具提示
    showTooltip(event, point, type) {
      const rect = this.$el.getBoundingClientRect()
      this.tooltip = {
        visible: true,
        x: event.clientX - rect.left + 10,
        y: event.clientY - rect.top - 10,
        title: this.getTooltipTitle(type),
        value: this.getTooltipValue(point.value, type),
        time: point.time
      }
    },
    
    // 隐藏工具提示
    hideTooltip() {
      this.tooltip.visible = false
    },
    
    // 获取工具提示标题
    getTooltipTitle(type) {
      const titles = {
        pressure: '平均压力',
        alert: '异常数量',
        online: '在线设备'
      }
      return titles[type] || ''
    },
    
    // 获取工具提示数值
    getTooltipValue(value, type) {
      const units = {
        pressure: 'kPa',
        alert: '个',
        online: '台'
      }
      return `${value.toFixed(type === 'pressure' ? 1 : 0)}${units[type] || ''}`
    }
  }
}
</script>

<style scoped>
.trend-chart {
  position: relative;
  width: 100%;
  height: 100%;
}

.chart-svg {
  width: 100%;
  height: 217px;
  background: transparent;
}

.chart-legend {
  position: absolute;
  top: 10px;
  right: 20px;
  display: flex;
  gap: 16px;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

.legend-color {
  width: 12px;
  height: 2px;
  border-radius: 1px;
}

.pressure-color {
  background: #1677FF;
}

.alert-color {
  background: #FF4D4F;
}

.online-color {
  background: #52C41A;
}

.tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  z-index: 1000;
  min-width: 120px;
}

.tooltip-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tooltip-title {
  font-weight: 600;
}

.tooltip-value {
  font-size: 14px;
  color: #ffd700;
}

.tooltip-time {
  font-size: 10px;
  color: #ccc;
}

/* 数据点悬停效果 */
.data-points circle {
  cursor: pointer;
  transition: all 0.2s;
}

.data-points circle:hover {
  stroke-width: 2;
  stroke: rgba(255, 255, 255, 0.8);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chart-legend {
    position: static;
    justify-content: center;
    margin-top: 8px;
    flex-wrap: wrap;
  }
  
  .legend-item {
    font-size: 11px;
  }
}
</style>
